<template>
	<div>
		<ComTrigger position="top" :popup-offset="10">
			<div class="com-type-select" :style="{ backgroundColor: dataValue }"> </div>
			<template #content>
				<div class="com-type-select-content">
                    <a-space wrap>
                        <ComTag class="tag" v-for="(color, index) of colors"  :key="index" :color="color"  @click="dataValue = color"> {{color}} </ComTag>
                    </a-space>
				</div>
			</template>
		</ComTrigger>
	</div>
</template>

<script setup lang="ts">
import ComTrigger from "./ComTrigger.vue";
import ComTag from "./ComTag.vue";
const props = defineProps({
	modelValue: {
		type: String,
		default: "success"
	}
});
const colors = ["red", "orangered", "orange", "gold", "lime", "green", "cyan", "blue",  "purple", "magenta", "gray"];
const emit = defineEmits(["update:modelValue"]);
const dataValue = computed({
	get: () => {
		return props.modelValue;
	},
	set: (value) => {
		emit("update:modelValue", value);
	}
});
</script>

<style scoped lang="scss">
.com-type-select {
	border: 1px solid #999999;
	width: 12px;
	height: 16px;
	background-color: #e8ffea;
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.7;
}
.com-type-select-content {
	max-width: 400px;
	background-color: #fff;
	padding: 16px;
	border-radius: 6px;
	box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
	cursor: pointer;
}
</style>
